<div style="width: 100% ; height: 90%">
    <table class="layui-hide" id="relevancyTable" lay-filter="relevancyTableFilter"></table>
</div>

<!--<div style="height: 10%">
    <button type="button" class="layui-btn layui-btn-sm">一个标准的按钮</button>
</div>-->
<script>
    layui.use(['form', 'table', 'miniPage', 'element', 'treeTable'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage,
            treeTable = layui.treeTable;

        treeTable.render({
            elem: '#relevancyTable',
            method: 'POST',
            tree: {
                iconIndex: 1, // 折叠图标显示在第几列
                isPidData: true, // 是否是id、pid形式数据
                idName: 'id', // id字段名称
                pidName: 'p_id', // pid字段名称
                haveChildName: 'have_child'  // 自定义标识是否还有子节点的字段名称
            },
            url: 'admin/categories',
            cols: [[
                {type: "checkbox", width: 30},
                {field: 'id', width: 220, title: 'ID', sort: true},
                {field: 'name', width: 260, title: '模型名称'},
                {field: 'code', width: 120, title: '类目编码', align: "center"},
                {field: 'full_name', width: 120, title: '全目录名称', align: "center"},
                {
                    field: 'type', width: 120, title: '类型', align: "center", templet: function (data) {
                        //类目类型: 1-图书 2-期刊 3-报纸 4-论文 5-古籍 6-音乐词稿 7-影视剧本 8-党政文件
                        // 9-文书案例 10-电子书（网文） 11-网站 12-个人作品集 13-机构作品集 14-第三方著作作品 15-综合
                        if (data.type === 1) {
                            return '<button type="button" class="layui-btn layui-btn-sm">图书</button>'
                        }
                        if (data.type === 2) {
                            return '<button type="button" class="layui-btn layui-btn-sm">期刊</button>'
                        }
                        if (data.type === 3) {
                            return '<button type="button" class="layui-btn layui-btn-sm">报纸</button>'
                        }
                        if (data.type === 4) {
                            return '<button type="button" class="layui-btn layui-btn-sm">论文</button>'
                        }
                        if (data.type === 5) {
                            return '<button type="button" class="layui-btn layui-btn-sm">古籍</button>'
                        }
                        if (data.type === 6) {
                            return '<button type="button" class="layui-btn layui-btn-sm">音乐词稿</button>'
                        }
                        if (data.type === 7) {
                            return '<button type="button" class="layui-btn layui-btn-sm">影视剧本</button>'
                        }
                        if (data.type === 8) {
                            return '<button type="button" class="layui-btn layui-btn-sm">党政文件</button>'
                        }
                        if (data.type === 9) {
                            return '<button type="button" class="layui-btn layui-btn-sm">文书案例</button>'
                        }
                        if (data.type === 10) {
                            return '<button type="button" class="layui-btn layui-btn-sm">电子书</button>'
                        }
                        if (data.type === 11) {
                            return '<button type="button" class="layui-btn layui-btn-sm">网站</button>'
                        }
                        if (data.type === 12) {
                            return '<button type="button" class="layui-btn layui-btn-sm">个人作品集</button>'
                        }
                        if (data.type === 13) {
                            return '<button type="button" class="layui-btn layui-btn-sm">机构作品集</button>'
                        }
                        if (data.type === 14) {
                            return '<button type="button" class="layui-btn layui-btn-sm">第三方著作作品</button>'
                        }
                        if (data.type === 15) {
                            return '<button type="button" class="layui-btn layui-btn-sm">综合</button>'
                        }
                    }
                },
                {field: 'std_expr', width: 120, title: '标准表述', align: "center"},
                // {field: 'last_train_time', width: 170, title: '最后训练时间', sort: true, align: "center"},
                // {field: 'train_num', width: 100, title: '训练次数', align: "center"},
                {field: 'create_time', width: 170, title: '创建时间', sort: true, align: "center"},
                // {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]],
            skin: 'line',
            done(res, curr, count) {
                console.log(res)
                console.log(curr)
                console.log(count)
                // renderCheckbox(idArray, res.data);//首次加载渲染 避免动态选择checkbox  reloadTable多次执行该方法  导致oldData变化（也就是表格的数据不断变化）
            }
        });

        //动态渲染复选框
        function renderCheckbox(idArray, data) {
            layui.each(idArray, function (idIndex, idItem) {
                layui.each(data, function (index, item) {
                    if (idItem === item["menuId"]) {
                        data[index]["LAY_CHECKED"] = 'true';  //数据添加选中
                        //下面是通过更改css来实现选中的效果
                        index = data[index]['LAY_TABLE_INDEX'];
                        var dom = $('tr[data-index=' + index + '] input[type="checkbox"]');
                        dom.prop('checked', true);
                        dom.next().addClass('layui-form-checked');
                    }
                });
            });
            form.render('checkbox');   //渲染
        }

        //监听表格复选框选择
        treeTable.on('checkbox(relevancyTable)', function (obj) {
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            // console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });
    })
</script>